<template>
  <div class="coupon_center">
    <!--<div class="back-vue">-->
      <!--<p @click="backPrePage">返回</p>-->
      <!--<p v-bind:style="{width: getTitleWidth + 'px'}">{{ this.$route.query.title }}</p>-->
      <!--<p>更多</p>-->
    <!--</div>-->
    <BackNavigation v-bind:title-info="titleInfo"/>
    <div class="img-container"><img
      src="../../assets/img/coupon/coupons_title_image.png"/>
    </div>
    <ul v-if="couponList.length">
      <li v-for="(couponItem, index) in couponList">
        <CouponVue v-bind:item="couponItem"  v-on:coupon-click="couponClick"/>
      </li>
    </ul>
    <NoDataVue v-bind:vue-info="noDataInfo" v-if="!nullShow ? nullShow : !couponList.length"/>
    <!--<NoDataVue v-else v-bind:vue-info="noDataInfo"/>-->
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import BackNavigation from './navigation.vue'
  import NoDataVue from './no_data.vue'
  import back from 'components/back'
  import CouponVue from './coupon.vue'
  import CouponCellVue from './coupon_cell.vue'
  import {get_cookie} from 'assets/cookie/cookie'

  export default {
    name: 'coupon_center',
    components: {
      back,
      CouponVue,
      BackNavigation,
      CouponCellVue,
      NoDataVue
    },
    props: {

    },
    data() {
      return {
        couponList: [],
        nullShow: false,
        titleInfo: {
          leftTitle: '返回',
          title: '领券中心',
          rightTitle: '更多'
        },
        noDataInfo: {
          title: '没有数据啊',
          iconUrl: '../../assets/img/common/no_data.png'
        },
        token: ''
      }
    },
    computed: {
      getTitleWidth() {
        let width = document.body.clientWidth
        return (width - 120 - 30)
      }
    },
    methods: {
      backPrePage () {
        this.$router.back()
      },
      couponClick: function (couponItem) {
        if (!get_cookie('key')) {
          this.$store.commit('SET_IS_LOGIN', false)
          return false
        }
        if (couponItem.status !== 0) {
          // 跳转分类页
          this.$router.push('/allClass')
          return false
        }

        // 加载动画
        let that = this
        this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle',
          duration: 2000
        })

        // 请求
        let params = {
          token: get_cookie('key'),
          couponId: couponItem.couponId
        }
        recommend.post_get_coupon(params).then(resault => {
          that.$indicator.close()
          that.$toast({
            message: resault.data.errmsg,
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
          if (resault.status === 200) {
            if (resault.data.errno === 0) {
              couponItem.status = 1
            }
          }
        }).catch(resault => {
          console.log(resault)
          that.$toast({
            message: '请求出错，请稍后重试',
            position: 'middle',
            duration: 1000,
            className: 'toast'
          })
        })
//        if (couponItem.status === 0) {  // 判断优惠卷状态
//          if (get_cookie('key')) {  // 判断是否登录
//            // 加载动画
//            let that = this
//            this.$indicator.open({
//              text: '加载中...',
//              spinnerType: 'fading-circle',
//              duration: 2000
//            })
//
//            // 请求
//            let params = {
//              token: get_cookie('key'),
//              couponId: couponItem.couponId
//            }
//            recommend.post_get_coupon(params).then(resault => {
//              that.$indicator.close()
//              that.$toast({
//                message: resault.data.errmsg,
//                position: 'middle',
//                duration: 1000,
//                className: 'toast'
//              })
//              if(resault.status === 200) {
//                if (resault.data.errno === 0) {
//                  couponItem.status = 1
//                }
//              }
//            }).catch(resault => {
//              console.log(resault)
//              that.$toast({
//                message: '请求出错，请稍后重试',
//                position: 'middle',
//                duration: 1000,
//                className: 'toast'
//              })
//            })
//          }
//          else {
////            this.$router.push('/login')
//            this.$store.commit('SET_IS_LOGIN', false)
//          }
//        }
//        else {
//          // 跳转分类页
//          this.$router.push('/allClass')
//        }
      }
    },
    watch: {

    },

    // vue周期函数
    created() {
//      this.$data.token = get_cookie('key')
      let params = {
        token: get_cookie('key')
      }
      console.log('token::::' + params.token)
      recommend.get_coupon_center_list(params).then(resault => {
        this.nullShow = true
        if(resault.status === 200) {
          this.$data.couponList = resault.data.data
        }
//        console.log(resault.data.data)
      }).catch(resault => {
        this.nullShow = true
        console.log(resault)
      })
    }
  }
</script>

<style scoped lang="scss">
  div.coupon_center {
    position: relative;
    height: auto;
    width: 100%;
    background-color: white;

    /*>div.back-vue {*/
      /*top: 0;*/
      /*width: 100%;*/
      /*height: 44px;*/
      /*position: fixed;*/
      /*z-index: 6;*/
      /*background-color: rgb(243, 243, 243);*/

      /*>p:first-child {*/
        /*float: left;*/
        /*width: 60px;*/
        /*margin-left: 15px;*/
        /*line-height: 44px;*/
        /*font-size: 12px;*/
        /*color: rgb(133, 133, 133);*/
        /*!*background-color: blanchedalmond;*!*/
      /*}*/

      /*>p:nth-child(2) {*/
        /*float: left;*/
        /*color: rgb(66, 66, 66);*/
        /*font-size: 16px;*/
        /*line-height: 44px;*/
        /*overflow: hidden;*/
        /*white-space: nowrap;*/
        /*text-overflow: ellipsis;*/
        /*!*background-color: green;*!*/
      /*}*/

      /*>p:last-child {*/
        /*margin-right: 15px;*/
        /*width: 60px;*/
        /*float: right;*/
        /*line-height: 44px;*/
        /*font-size: 12px;*/
        /*color: rgb(133, 133, 133);*/
        /*!*background-color: red;*!*/
      /*}*/
    /*}*/

    >div.img-container {
      margin-top: 44px;
      background-color: white;
      height: 100px;
      width: 100%;

      >img {
        height: 100px;
        max-width: 100%;
      }
    }

    >ul {
      /*margin-top: 20px;*/
      /*margin-bottom: 20px;*/
      background-color: white;
      width: 100%;
      height: auto;

      >li {
        width: 100%;
        height: auto;
        list-style: none;
        margin-bottom: 10px;
      }
    }
  }

  .toast {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
  }
</style>
